<template>
  <div class="about">
    <div v-if="videoDetail && videoDetail.data && videoDetail.data.itemExplainList.length > 0">
      <!-- 视频播放器，提前渲染视频，但不播放 -->
      <div v-show="videoReady">
        <video class="sping" :src="videoDetail.data.itemExplainList[0].videoInfo.h265Url" controls ref="videoElement" muted />
      </div>

      <!-- 仅当视频准备好后，才显示点击图片并允许播放 -->
      <div v-show="!videoPlaying && videoReady" class="bof2" @click="playVideo">
        <img src="../../public/images/bof.png" alt="点击播放视频" />
      </div>

      <!-- 显示演员头像 -->
      <div v-if="videoDetail.data.itemExplainList[0].actorInfo.avatar" class="toxing6">
        <div class="sc2">
          <img :src="videoDetail.data.itemExplainList[0].actorInfo.avatar" class="actor-avatar" />
          <div class="guanz" @click="toggleFollow">{{ isFollowing ? '已关注' : '关注' }}</div>
        </div>
        <div class="sc1">
          <img src="../../public/images/星.png" alt="演员头像" class="actor-avatar2" />
          <p class="zi1">收藏</p>
        </div>

        <div class="sc1">
          <img src="../../public/images/pingluen.png" alt="评论" class="actor-avatar2" @click="showActionSheet" />
        </div>

        <div class="sc1">
          
          <RouterLink to="/shoppingcar"><img src="../../public/images/gowuc.png" alt="演员头像" class="actor-avatar2" /></RouterLink
            >
          <p class="zi2">购物车</p>
        </div>
      </div>
    </div>

    <div v-if="videoDetail && videoDetail.data && videoDetail.data.itemExplainList.length > 0">
      <div v-if="videoDetail.data.itemExplainList[0].actorInfo.name" class="mingzi2">
        <div>@{{ videoDetail.data.itemExplainList[0].actorInfo.name }}</div>
        <div class="mingzi3">
          {{ videoDetail.data.itemExplainList[0].actorInfo.height }}cm
          {{ videoDetail.data.itemExplainList[0].actorInfo.weight }}kg
          <span>|</span>
          {{ videoDetail.data.itemExplainList[0].actorInfo.fansCount }}
        </div>
      </div>
    </div>

    <div v-if="videoDetail && videoDetail.data && videoDetail.data.itemExplainList.length > 0">
      <div v-if="videoDetail.data.itemExplainList[0].itemInfo.cover" class="sping9">
        <div class="sping2">
          <img :src="videoDetail.data.itemExplainList[0].itemInfo.cover" alt="" />
          <div class="sping3">{{ videoDetail.data.itemExplainList[0].itemInfo.title }}</div>
          <div class="sping4">待秒杀</div>
          <div class="sping5">￥{{ videoDetail.data.itemExplainList[0].itemInfo.discountPrice }}</div>
          <div class="sping6"  @click="goToItemDetail(store.itemIdUrl)">
            <div>立刻购买</div>
            
          </div>
        </div>
      </div>
    </div>

    <div class="back" @click="goBack">
      <img src="../../public/images/返回.png" alt="返回" />
    </div>

    <!-- 显示评论 -->
    <van-action-sheet v-model:show="show" :overlay="false" :title="'购买评价 ' + totalComments + ' '" style="height: 47%; border-radius: 0;background: #171717;color: aliceblue;">
      <div v-if="userNames.length > 0">
        <div v-for="(comment, index) in userNames" :key="index" class="comment-item">
          <img :src="comment.avatar" alt="用户头像" class="user-avatar" />
          <div class="tack">
            <span class="tack-name">{{ comment.userName }}</span>
            <span class="comment-time">{{ comment.time }}</span>
            <div class="tark-in">{{ comment.content }}</div>
          </div>
        </div>
      </div>
      <div v-else>
        <p>暂无评论</p>
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useItemStore } from '../stores/songye';
import axios from 'axios';

import { useRoute, useRouter } from "vue-router";

interface VideoDetail {
  data: {
    itemExplainList: Array<{
      itemInfo: {
        title: string;
      };
      actorInfo: {
        avatar: string;
      };
      videoInfo: {
        h265Url: string;
      };
    }>[];
  };
}
const router = useRouter();
const route = useRoute();
const goBack = () => window.history.back();

const store = useItemStore();
const videoDetail = ref<VideoDetail | null>(null);
const videoPlaying = ref(false);  // 控制视频播放
const videoReady = ref(false);  // 控制视频准备状态
const videoElement = ref<HTMLVideoElement | null>(null);

const isFollowing = ref(false);
const show = ref(false);
const userNames = ref<any[]>([]); // 存储评论数据
const totalComments = ref<number>(0);

const goToItemDetail = (itemId: string) => {
  // 使用 router.push 跳转到 TiaoZhuan 页面，传递 itemId 参数
  router.push({ name: 'TiaoZhuan', params: { iid: itemId } });
  console.log("商品详情页的itemId:", itemId); // 打印传递的 itemId
};




const playVideo = () => {
  if (videoElement.value) {
    videoPlaying.value = true;
    videoElement.value.play().catch((error) => {
      console.error("播放视频时出错:", error);  // 捕获播放错误
    });
  } else {
    console.error("找不到视频元素");
  }
};

const toggleFollow = () => {
  isFollowing.value = !isFollowing.value; // 切换关注状态
};

const showActionSheet = () => {
  show.value = true;
};

onMounted(async () => {
  try {

    const itemId = store.itemIdUrl;
    const actorId = store.actorIdUrl;
    console.log("itemId:", itemId);
    

    const url = `https://apis.netstart.cn/mogujie/video/detail?itemId=${itemId}&actorId=${actorId}`;
    const url2 = `https://apis.netstart.cn/mogujie/video/comment?itemId=${itemId}&actorId=${actorId}`;

    const response = await axios.get(url);
    videoDetail.value = response.data;
    videoReady.value = true;

    const response2 = await axios.get(url2);
    const comments = response2.data.data.commentList; // 获取评论列表
    console.log("id",response2.data.data.commentList);
    
    totalComments.value = response2.data.data.total; // 获取评论总数
    userNames.value = comments.map((comment: any) => ({
      userName: comment.userName,
      avatar: comment.avatar || 'default-avatar.jpg', // 默认头像
      time: comment.time,
      content: comment.content
    }));
  } catch (error) {
    console.error("获取数据失败:", error);
    userNames.value = []; // 如果获取数据失败，确保 userNames 是空数组
    totalComments.value = 0;
  }
});
</script>



<style lang="less" scoped>
.comment-item {
  display: flex;
  // align-items: center;
}

.comment-item>div {
  display: flex;
  flex-direction: column;
  /* 将用户名和时间垂直排列 */
  margin-left: 10px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5rem;
  margin-left: 10rem;
  margin-top: 10rem;
}

.tenchu {
  height: 50% !important;

}

.content {
  padding: 16px 16px 160px;
  height: 150rem;
}

.back {
  position: fixed;
  top: 2%;
  left: 3%;
  ;
  width: 9%;

  img {
    width: 100%;
  }
}

.sping6 {
  position: absolute;
  display: flex;
  top: 26%;
  width: 20%;
  left: 75%;
  height: 48%;
  font-size: 11rem;
  color: #fff;
  background-color: #f46;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 15.6rem;

}

.sping5 {
  position: absolute;
  font-size: 15rem;
  width: 15%;
  top: 54%;
  left: 30%;
  color: #fa4e82;
}

.sping4 {
  text-align: center;
  position: absolute;
  width: 10%;
  top: 59%;
  left: 18%;
  font-size: 10rem;
  color: #fff;
  background: linear-gradient(150deg, #fb872c, #fc4441);

}

.sping3 {
  color: #fff;
  position: absolute;
  left: 18%;
  top: 10%;
  width: 54%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14rem;
}

.sping2 {
  width: 100%;
  height: 57rem;

}

.sping9 {
  position: fixed;
  width: 90%;

  top: 85%;
  left: 6%;
  background-color: #3f3f3f99;

  img {
    position: absolute;
    width: 45rem;
    height: 45rem;
    top: 10%;
    left: 2%;
  }
}

.mingzi3 {
  font-size: 13rem;
  color: hsla(0, 0%, 100%, .6);
  ;
}

.mingzi2 {
  font-size: 15rem;
  position: fixed;
  top: 80%;
  left: 5%;
  color: #ffffff;
}

.guanz {
  position: absolute;
  top: 41rem;
  left: 7rem;
  color: #ffffff;
  background-color: #f50030;
  border-radius: 5.8rem;
  cursor: pointer;
  width: 32rem;
  display: flex;
  justify-content: space-evenly;
}

.bof2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100vw;
  height: 100vh;
  cursor: pointer;
  /* 让图片看起来是可点击的 */
}

.bof2 img {
  width: 50rem;
}

.sc1 {
  width: 50rem;
  height: 59rem;
  margin-bottom: 5rem;
  position: relative;
}

.sc2 {
  width: 45rem;
  height: 45rem;
  margin-bottom: 19rem;
  position: relative;
  left: -5rem;
  border: 2rem solid #fff;
  border-radius: 50rem;
}

.actor-avatar2 {
  position: absolute;
  width: 40rem;
}

.zi1 {
  position: absolute;
  color: #ffffff;
  top: 30rem;
  left: 9rem;
  width: 23rem;
  display: grid;
  justify-content: space-between;
  justify-items: stretch;
}

.zi2 {
  position: absolute;
  color: #ffffff;
  top: 29rem;
  left: 7rem;
  width: 35rem;
  display: grid;
  justify-content: space-between;
  justify-items: stretch;
}

.toxing6 {
  top: 50%;
  left: 319rem;
  position: fixed;
}

.about {
  position: relative;
  font-size: 10rem;
}

.sping {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  /* 视口宽度 */
  height: 100vh;
  /* 视口高度 */
  object-fit: cover;
  /* 保持宽高比，裁剪视频以覆盖整个容器 */
  background-color: black;
}

.actor-avatar {
  width: 45rem;
  height: 45rem;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
}

.van-popup--bottom{
  background-color: #000000a8;
}

.van-action-sheet__header {
  text-align: left;
  margin-left: 10rem;
  font-size: 12rem;
  color: #666;
}

.tack {
  color: #666;
  margin-top: 10rem;
  height: 75rem;
  width: 100%;
  border-bottom: 1px solid #33333357;

  .tack-name {
    font-size: 12rem;
    color: #666;

  }

  .comment-time {
    font-size: 10rem;
    color: #666;
  }

  .tark-in {
    font-size: 13rem;
    color: white;
    margin-top: 5rem;
  }

}
</style>
